<template>
  <div class="mobild-nav">
    <el-menu
      class="sidebar-el-menu"
      ref="menu"
      background-color="#fff"
      unique-opened
      @select="menuSelect"
      :default-active="onRoutes"
    >
      <template v-for="item in navList">
        <template v-if="Array.isArray(item.child) && item.child.length > 0">
          <el-submenu :key="item.content" :index="item.content">
            <template slot="title">
              <span slot="title">{{ item.title }}</span>
            </template>
            <template v-for="subItem in item.child">
              <el-submenu
                v-if="Array.isArray(subItem.child) && subItem.child.length > 0"
                :index="subItem.content"
                :key="subItem.content"
              >
                <template slot="title">
                  <span slot="title">{{ subItem.title }}</span>
                </template>
                <el-menu-item
                  v-for="(threeItem, i) in subItem.child"
                  :key="i"
                  :index="threeItem.content"
                >
                  <span slot="title">{{ threeItem.title }}</span>
                </el-menu-item>
              </el-submenu>
              <el-menu-item
                v-else
                :index="subItem.content"
                :key="subItem.content"
              >
                <span slot="title">{{ subItem.title }}</span>
              </el-menu-item>
            </template>
          </el-submenu>
        </template>
        <template v-else>
          <el-menu-item :index="item.content" :key="item.content">
            <span slot="title">{{ item.title }}</span>
          </el-menu-item>
        </template>
      </template>
    </el-menu>
  </div>
</template>

 <script>
import { Toast, Dialog } from "vant";
export default {
  props: ["menuMobileBack"],
  components: {
    [Dialog.name]: Dialog,
  },
  data() {
    return {
       navList: [
        { content: "/mobile/admin/home", title: "采集列表" },
        { content: "/mobile/admin/selfTem", title: "个人模板" },
        // { content: "/mobile/admin/statistics", title: "统计中心" },
        { content: "/mobile/admin/mine", title: "个人中心" }
      ],
      activeIds: [1, 2],
      activeIndex: 0,
      onRoutes:'homeSearch'
    };
  },
  watch:{
    $route(to,from){
      console.log('to.path.substring(1)',to.path.substring(1))
      this.onRoutes=to.path?to.path.substring(1):''
    }
  },
  created() {
    this.onRoutes=this.$route.path.substring(1);
  },
  methods: {
    menuSelect(e) {
      console.log("e", e);
      if (e === "out") {
        Dialog.confirm({
          title: "提示",
          message: "确定退出本系统",
        })
          .then(() => {
            Toast.loading({ message: "加载中...", forbidClick: true });
            this.$http
              .post(this.$API.LOGOUT, {})
              .then((res) => {
                Toast.clear();
                if (res.code == 1) {
                  window.sessionStorage.removeItem("userName");
                  window.sessionStorage.removeItem("jqzxUserId");
                  this.$router.push("/login");
                } else {
                  this.$message.error(res.msg);
                }
              })
              .catch((err) => {
                Toast.clear();
                this.$message.error("网络错误,请检查网络状况!");
              });
          })
          .catch(() => {});
      } else {
        if(window.location.hash.indexOf(e)==-1){
          window.sessionStorage.setItem('jqjtIsBack',1);
          this.$router.push({ path: e });
        }
      }
      if (typeof this.menuMobileBack == "function") {
        this.menuMobileBack();
      }
    },
  },
};
</script>

<style lang="less" scoped>
.web-nav {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(0, 0, 0, 0.9);
  padding-top: 10px;
  .web-nav-item {
    width: 1200px;
    padding: 0 20px;
    position: relative;
    .web-nav-item-content {
      position: relative;
      display: flex;
    }
    .web-nav-item-group-active {
      .web-nav-item-title {
        color: #cc0a15 !important;
      }
      .web-nav-item-en {
        color: #cc0a15 !important;
      }
    }
    .web-nav-item-group {
      padding: 0 30px;
      .web-nav-item-title {
        height: 40px;
        line-height: 40px;
        font-size: 22px;
        color: #fff;
        white-space: nowrap;
      }
      .web-nav-item-en {
        height: 60px;
        line-height: 60px;
        font-size: 14px;
        color: #fff;
        text-align: center;
      }
      &:hover {
        cursor: pointer;
        .web-nav-item-title {
          color: #cc0a15;
        }
        .web-nav-item-en {
          color: #cc0a15;
        }
      }
    }
    &::before {
      content: "";
      position: absolute;
      top: 50%;
      left: 0;
      right: 0;
      transform: translateY(-50%);
      height: 2px;
      background: rgba(255, 255, 255, 0.6);
    }
    .web-nav-item-hover {
      position: absolute;
      top: 50%;
      left: 0;
      min-width: 100px;
      transform: translateY(-50%);
      height: 8px;
      background: #cc0a15;
      transition: left 0.4s;
    }
  }
}
</style>
